<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(str,index) in listImg" :key="index">
				<a :href="str.href">
					<img :src="str.src" alt="图片" />
					<div :class="str.class">{{ str.text }}</div>
				</a>
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
	props: ['listImg','autoPlay','loop'],
	mounted() {
		var swiper = new Swiper('.swiper-container', {
			pagination: {
				el: '.swiper-pagination',
				bulletClass:'swiper-pagination-bullet',
				bulletActiveClass:'swiper-pagination-bullet-active',
				clickable: true
			},
			loop: this.loop,
			speed: 600,
			autoplay: this.autoPlay,
			onTouchEnd: function(swiper,event) {
				swiper.autoPlay
			}
		});

	}
}
</script>

<style scope>
.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-container .swiper-wrapper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
}

.swiper-slide img {
	width: 100%;
	height: auto;
}

.banner_href{
	width: 150px;
	height: 30px;
	line-height: 30px;
	position: absolute;
	top: 80%;
	left: 50%;
	margin-left: -75px;
	color: #515c71;
	font-size: 18px;
	border:1px solid #515c71;
	border-radius:5px;
	font-weight:bold;
	text-align: center;
}
.swiper-pagination-bullet {
	width: 0.48rem;
	height: 0.06rem;
	display: inline-block;
	background: #fff;
	border:1px solid #F27326;
	border-radius: 0.03rem;
	
}
.swiper-pagination-bullet:focus {	
	outline: none;
}

.swiper-pagination-bullet-active{
	background: #F27326;
}
</style>